<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Air Share!</title>

    <!-- zui -->
    <link rel="stylesheet" href="../css/zui.css">
    <link rel="stylesheet" href="../lib/uploader/zui.uploader.css">

    <style>
        footer {
            position: absolute;
            bottom: 0; /* 4. 设置页脚position为absolute之后，再将其bottom值设为0，即可使其处于页面的底部 */
            /*border: 1px red solid;*/
            clear: both;
            display: block;
            text-align: center;
            width: 100%;
            padding: 20px;
        }
    </style>
</head>

<body>

<div class="container">
    <ul class="nav nav-primary" style="margin-top: 20px">
        <li class="active"><a href="index">首页</a></li>
        <li><a href="#" id="filesLink">文件</a></li>
        <li class="pull-right" id="authSection">
            <!-- Auth section will be populated by JavaScript -->
        </li>
    </ul>
    
    <div id="loginRequired" style="display: none;">
        <div class="alert alert-info">
            <h4>Login Required</h4>
            <p>Please <a href="/login">login</a> or <a href="/register">register</a> to upload and view files.</p>
        </div>
    </div>
    
    <div id="uploadSection">
        <h3>上传完文件后直接点击"文件"查看。下面上传你的文件，只有登录用户可以访问</h3>
        <h3 style="color: red">文件需要登录才能查看，请及时删除！！！</h3>

        <div id="uploaderExample" class="uploader">
            <div class="file-list" data-drag-placeholder="请拖拽文件到此处"></div>
            <button type="button" class="btn btn-primary uploader-btn-browse"><i class="icon icon-cloud-upload"></i>
                选择文件
            </button>
        </div>
    </div>

    <h3>同类的产品推荐</h3>
    <h4>下面是局域网内的传输，也就是两台电脑很近，可能在一个房间。那么同时打开这个网站就会发现对方，然后就可以拖文件到对方头像就可以传输了。</h4>
    <ul>
        <li><a href="https://snapdrop.net/" target="_blank">https://snapdrop.net/</a></li>
        <li><a href="https://drop.fydeos.com/" target="_blank">https://drop.fydeos.com/</a></li>
        <li><a href="https://localsend.org/" target="_blank">https://localsend.org/</a></li>
    </ul>
    <h4>下面是互联网传输，火星也可以传递！</h4>
    <ul>
        <li><a href="https://airportal.cn/" target="_blank">https://airportal.cn/</a></li>
        <li><a href="https://musetransfer.com/" target="_blank">https://musetransfer.com/</a></li>
        <li><a href="https://cowtransfer.com/" target="_blank">https://cowtransfer.com/</a></li>
        <li><a href="https://www.wenshushu.cn/" target="_blank">https://www.wenshushu.cn/</a></li>
        <li><a href="https://www.ppzhilian.com/" target="_blank">https://www.ppzhilian.com/</a></li>
        <li><a href="https://wormhole.app/" target="_blank">https://wormhole.app/</a></li>
        <li><a href="https://2w.ma/" target="_blank">草料二维码提供支持 https://2w.ma/</a></li>
        <li><a href="https://pairdrop.net/" target="_blank">https://pairdrop.net/</a></li>
        <li><a href="https://fastsend.ing/" target="_blank">https://fastsend.ing/</a></li>
    </ul>
    <h4>P2P传输，不走服务器</h4>
    <ul>
        <li><a href="https://wormhole.app/" target="_blank">https://wormhole.app/</a></li>
        <li><a href="https://file.pizza/" target="_blank">https://file.pizza/</a></li>
        <li><a href="https://deershare.com/send" target="_blank">https://deershare.com/send</a></li>
        <li><a href="https://webrtc.touchczy.top/" target="_blank">https://webrtc.touchczy.top/ 局域网传输</a></li>
    </ul>

</div>

<footer id="footer"><a href="https://beian.miit.gov.cn/">京ICP备18028985号-2</a> </footer>

<!-- 在此处编码你的创意 -->

<!-- jQuery (ZUI中的Javascript组件依赖于jQuery) -->
<script src="../js/jquery-1.11.0.min.js"></script>
<!-- ZUI Javascript组件 -->
<!-- ZUI 标准版压缩后的 JavaScript 文件 -->
<script src="../js/zui.js"></script>
<script src="../lib/uploader/zui.uploader.js"></script>

<script>
    // Authentication management
    $(document).ready(function() {
        checkAuthStatus();
        
        // Handle files link click
        $('#filesLink').on('click', function(e) {
            e.preventDefault();
            var token = localStorage.getItem('authToken');
            if (token) {
                window.location.href = '/files';
            } else {
                alert('Please login first to view files.');
                window.location.href = '/login';
            }
        });
    });
    
    function checkAuthStatus() {
        var token = localStorage.getItem('authToken');
        var username = localStorage.getItem('username');
        
        if (token && username) {
            // User is logged in
            $('#authSection').html(
                '<li class="dropdown">' +
                '<a href="#" class="dropdown-toggle" data-toggle="dropdown">' +
                'Welcome, ' + username + ' <b class="caret"></b>' +
                '</a>' +
                '<ul class="dropdown-menu">' +
                '<li><a href="#" onclick="logout()">Logout</a></li>' +
                '</ul>' +
                '</li>'
            );
            $('#loginRequired').hide();
            $('#uploadSection').show();
            $('#filesLink').attr('href', '/files').text('文件 (已登录)');
            
            // Configure uploader with authentication
            setupAuthenticatedUploader();
        } else {
            // User is not logged in
            $('#authSection').html(
                '<li><a href="/login">Login</a></li>' +
                '<li><a href="/register">Register</a></li>'
            );
            $('#loginRequired').show();
            $('#uploadSection').hide();
            $('#filesLink').attr('href', '#').text('文件 (需登录)');
        }
    }
    
    function logout() {
        // Call API logout first
        $.ajax({
            url: '/auth/logout',
            type: 'POST',
            success: function(response) {
                if (response.code === 200) {
                    // Clear client-side data after successful server logout
                    localStorage.removeItem('authToken');
                    localStorage.removeItem('username');
                    localStorage.removeItem('email');
                    localStorage.removeItem('userId');
                    // clear AUTH_TOKEN cookie
                    document.cookie = 'AUTH_TOKEN=; Path=/; Expires=Thu, 01 Jan 1970 00:00:00 GMT; SameSite=Lax';
                    checkAuthStatus();
                    console.log('Logout successful');
                } else {
                    alert('Logout failed: ' + response.msg);
                }
            },
            error: function(xhr, status, error) {
                console.error('Logout error:', error);
                alert('Logout failed');
            }
        });
    }
    
    function setupAuthenticatedUploader() {
        var token = localStorage.getItem('authToken');
        
        $('#uploaderExample').uploader({
            autoUpload: true,
            prevent_duplicates: true,
            chunk_size: '4mb',
            url: '/file/upload',
            headers: {
                'Authorization': 'Bearer ' + token
            },
            responseHandler: function (responseObject, file) {
                console.log("服务器返回信息:", responseObject);
                
                if (responseObject.response.indexOf('error') === 0) {
                    return '上传失败。服务器返回了一个错误：' + responseObject.response;
                } else if (responseObject.response.indexOf('error2') === 0) {
                    return true;
                }
            },
            onError: function (error) {
                console.log(error.code + error.message + file.name);
                
                // Check if error is due to authentication
                if (error.code === 401 || error.message.includes('unauthorized')) {
                    alert('Authentication failed. Please login again.');
                    logout();
                }
            }
        });
    }
    
    function getHostPath() {
        //获取当前网址，如： http://localhost:8088/test/test.jsp
        var curPath = window.document.location.href;
        console.log(curPath)
        //获取主机地址之后的目录，如： test/test.jsp
        var pathName = window.document.location.pathname;
        console.log(pathName)

        curPath = curPath.replace("#", "")
        var localhostPath
        if (pathName === '/') {
            localhostPath = curPath
        } else {
            var pos = curPath.indexOf(pathName);
            //获取主机地址，如： http://localhost:8088
            localhostPath = curPath.substring(0, pos);
        }
        console.log("当前服务器地址" + localhostPath)
        return localhostPath;//发布前用此
    }
</script>
</body>

</html>
